<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Home Version 3</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="scripts/ie9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/style.css"> 
<link rel="stylesheet" href="stylesheets/responsive.css"> 
<link rel="stylesheet" href="stylesheets/flexslider.css">
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/jquery.bxSlider.min.js"></script>
<script src="scripts/piecemaker/scripts/swfobject/swfobject.js"></script>
<script src="scripts/jquery.blackandwhite.min.js"></script>
<script src="scripts/js_func.js"></script>
<script>
      var flashvars = {};
      flashvars.cssSource = "scripts/piecemaker/piecemaker.css";
      flashvars.xmlSource = "scripts/piecemaker/piecemaker.xml";
		
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";
	  
      swfobject.embedSWF('scripts/piecemaker/piecemaker.swf', 'piecemaker', '960', '480', '10', null, flashvars,    
      params, null);

$(function(){
	$('.features_slider').bxSlider({
		auto: false,
		displaySlideQty: 5,
		moveSlideQty: 1,
    	speed : 1000
	});
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        responsive:true,
        invertHoverEffect:false
    });
})
</script>
</head>
<body>
<div class="wraper">
 <header class="header">
  <a class="logo" href="index.html">construct</a>
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="index.html">Home</a>
     <ul>
      <li><a href="index2.html">Home Version 2</a></li>
      <li><a href="index3.html">Home Version 3</a></li>
      <li><a href="index4.html">Home Version 4</a></li>
      <li><a href="index5.html">Home Version 5</a></li>
      <li><a href="index6.html">Home Version 6</a></li>
      <li><a href="index7.html">Home Version 7</a></li>
      <li><a href="index8.html">Home Version 8</a></li>
     </ul>
    </li>
    
    <li><a href="about.html">Pages</a>
     <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="team.html">Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="process.html">Process</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="left_nav.html">Left Nav</a></li>
      <li><a href="left_sidebar.html">Left Sidebar</a></li>
      <li><a href="right_nav.html">Right Nav</a></li>
      <li><a href="right_sidebar.html">Right Sidebar</a></li>
      <li><a href="full_width.html">Full Width</a></li>
     </ul>
    </li>
    <li><a href="short_text.html">Portfolio</a>
     <ul>
      <li><a href="short_text.html">Short Text Layout</a>
       <ul>
        <li><a href="short_text.html">1 Column</a></li>
        <li><a href="short_text2.html">2 Column</a></li>
        <li><a href="short_text3.html">3 Column</a></li>
        <li><a href="short_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="long_text.html">Long Text Layout</a>
       <ul>
        <li><a href="long_text_wide.html">1 Column Wide</a></li>
        <li><a href="long_text.html">1 Column</a></li>
        <li><a href="long_text2.html">2 Column</a></li>
        <li><a href="long_text3.html">3 Column</a></li>
        <li><a href="long_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="filtered.html">Filtered Layout</a>
       <ul>
        <li><a href="filtered.html">1 Column</a></li>
        <li><a href="filtered2.html">2 Column</a></li>
        <li><a href="filtered3.html">3 Column</a></li>
        <li><a href="filtered4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="right_sidebar.html">Right Sidebar</a>
       <ul>
        <li><a href="right_sidebar.html">1 Column</a></li>
        <li><a href="right_sidebar2.html">2 Column</a></li>
        <li><a href="right_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="left_sidebar.html">Left Sidebar</a>
       <ul>
        <li><a href="left_sidebar.html">1 Column</a></li>
        <li><a href="left_sidebar2.html">2 Column</a></li>
        <li><a href="left_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="gallery.html">Gallery Style</a>
       <ul>
        <li><a href="gallery.html">1 Column</a></li>
        <li><a href="gallery2.html">2 Column</a></li>
        <li><a href="gallery3.html">3 Column</a></li>
        <li><a href="gallery4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="single_full.html">Portfolio Single Post</a>
       <ul>
        <li><a href="single_full.html">Full Width</a></li>
        <li><a href="single_right.html">Right Sidebar</a></li>
        <li><a href="single_left.html">Left Sidebar</a></li>
       </ul>
      </li>
     </ul>    
    </li>
    <li><a href="blog_post.html">Blog</a>
     <ul>
      <li><a href="blog_full_width.html">Full Width</a></li>
      <li><a href="blog_large.html">Large Image No Sidebar</a></li>
      <li><a href="blog_large_sidebar.html">Large Image With Sidebar</a></li>
      <li><a href="blog_medium_sidebar.html">Medium Image Right Sidebar</a></li>
     </ul>
    </li>
    <li><a href="shortcodes_typography.html">Shortcodes</a>
     <ul>
      <li><a href="shortcodes_typography.html">Typography</a></li>
      <li><a href="shortcodes_buttons_icons.html">Buttons</a></li>
      <li><a href="shortcodes_google_maps.html">Maps</a></li>
      <li><a href="shortcodes_content_sliders.html">Sliders</a></li>
      <li><a href="shortcodes_videos.html">Videos</a></li>
      <li><a href="shortcodes_pricing_tables.html">Tables</a></li>
      <li><a href="shortcodes_alerts_boxes.html">Boxes</a></li>
      <li><a href="shortcodes_accordions_tabs_toggles.html">Tabs</a></li>
     </ul>
    </li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div> 

<!-- piecemaker slider -->
<div class="wraper">
 <div class="fallback"><img src="images/sliders/home_page_3/home_page_3_fallback.jpg" alt="" /></div>
 <div id="piecemaker">
  <!--<p>Put your alternative Non Flash content here.</p>-->
 </div>
</div>
<!-- /piecemaker slider -->
 
<div class="content_block">
 <!-- text bar2 -->
 <div class="text_bar2">
  <div class="wraper">
   <h2>Welcome to Construct, a responsive business HTML template with tons of options! <span>Want to take a tour?  Check out the numerous options &amp; features that Construct includes, we know you'll love them!</span></h2>
   <a class="buy btn_l" href="#">Buy Construct!</a>
  </div>
 </div>
 <!-- /text bar2 -->
 <div class="wraper">
  <!-- bc_list -->
  <div class="bc_list">
   <ul>
    <li>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_3_feature_circles/feature_1.png" alt="" /></a></div>
     <h4>Superb Design Options</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
    </li>
    <li>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_3_feature_circles/feature_2.png" alt="" /></a></div>
     <h4>Amazing Flexibility</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
    </li>
    <li>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_3_feature_circles/feature_3.png" alt="" /></a></div>
     <h4>Life Saving Support</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
    </li>
   </ul>
  </div>
  <!-- /bc_list -->
  <!-- why choose -->
  <div class="why_choose">
   <h4>Why Choose Construct?  We’ll Tell You!</h4>
   <ul>
    <li>Cras rutrum leo at odio volutpat id blandit fugiats ipsum ornare.</li>
    <li>Donec fermentum porttitor nunc, sit amet gravida est porttitor vel.</li>
    <li>Maecenas quis nisi i luctus adipiscing sed vehicula tellus amet dolore.</li>
    <li>Aenean faucibus sapien a odio varius aliquet voluptas sadips..</li>
    <li>Suspendisse venenatis euismod ve vestibulum volutpat nibh imperdiets.</li>
    <li>Quisque non leo molestie augue imperdiet sollicitudin eu nec urna.</li>
    <li>Donec pulvinar lectus quis felis laoreet vestibulum.</li>
   </ul>
  </div>
  <!-- /why choose -->
  <!-- features2_block -->
  <div class="features2_block features3_block">
   <ul>
    <li class="design">
     <a class="circle_link" href="#">&nbsp;</a>
     <h4>Great Design</h4>
     <p><span>Subhead Goes HEre</span></p>
     <p>Lid est laborum dolos rumes fustsirs sit untras. Et harums ser quidem sit rerums facilis est dolores uni nemis sad untras voluptas uners sits amets.  </p>
    </li>
    <li class="flexible">
     <a class="circle_link" href="#">&nbsp;</a>
     <h4>Very Flexible</h4>
     <p><span>Subhead Goes HEre</span></p>
     <p>Lid est laborum dolos rumes fustsirs sit untras. Et harums ser quidem sit rerums facilis est dolores uni nemis sad untras voluptas uners sits amets.  </p>
    </li>
    <li class="support">
     <a class="circle_link" href="#">&nbsp;</a>
     <h4>Superb Support</h4>
     <p><span>Subhead Goes HEre</span></p>
     <p>Lid est laborum dolos rumes fustsirs sit untras. Et harums ser quidem sit rerums facilis est dolores uni nemis sad untras voluptas uners sits amets.  </p>
    </li>
    <li class="easy">
     <a class="circle_link" href="#">&nbsp;</a>
     <h4>Easy To Customize</h4>
     <p><span>Subhead Goes HEre</span></p>
     <p>Lid est laborum dolos rumes fustsirs sit untras. Et harums ser quidem sit rerums facilis est dolores uni nemis sad untras voluptas uners sits amets.  </p>
    </li>
   </ul>
  </div>
  <!-- /features2_block -->
  <!-- client list -->
  <div class="featured_list client_list">
   <div class="features_slider_wrap">
   <h3>Our Most Successful Clients</h3>
   <ul class="features_slider">
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_1.png" alt="" /></a></div></div></li>
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_2.png" alt="" /></a></div></div></li>
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_3.png" alt="" /></a></div></div></li>
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_4.png" alt="" /></a></div></div></li>
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_5.png" alt="" /></a></div></div></li>
    <li><div><div class="bwWrapper"><a href="#"><img src="images/client_logos/client_logo_6.png" alt="" /></a></div></div></li>
   </ul>
   </div>
  </div>
  <!-- /client list -->
 </div>
</div>

<!-- footer -->
<!-- social block -->
<div class="social_block">
 <div class="wraper">
  <p>Stay connected with us in your favorite flavor!</p>
  <ul>
   <li class="facebook"><a href="#">Facebook</a></li>
   <li class="twitter"><a href="#">Twitter</a></li>
   <li class="linkedin"><a href="#">LinkedIn</a></li>
   <li class="rss"><a href="#">RSS</a></li>
   <li class="dribbble"><a href="#">Dribbble</a></li>
   <li class="google"><a href="#">Google+</a></li>
  </ul>
 </div>
</div>
<!-- /social block -->

<div class="footer">
 <footer>
  <!-- bottom about -->
  <div class="bottom_about">
   <p><img src="images/logo.png" alt="" /></p>
   <p>At vero eos et accusaus et iusto unir un dignissimos ducimus quirds siter ters pi blranditiis praesentium amets voluptatum un deleniti atque corrupti quosdirs dolores etra quasir moltias unstw excepturi sinte amets occaecatires.</p>
  </div>
  <!-- /bottom about -->
  <!-- recent tweets -->
  <div class="recent_tweets">
   <h3><span>Recent Tweets</span></h3>
   <ul>
    <li><a href="#">@laurakalbag</a> I will be very soon. Ase result reco endation <a href="#">31 minutes ago</a></li>
    <li><a href="#">@laurakalbag</a> you got chocolates!? That's i I'm signing up. <a href="#">37 minutes ago</a></li>
   </ul>
  </div>
  <!-- /recent tweets -->
  <!-- recent posts -->
  <div class="recent_posts">
   <h3><span>Recent Posts</span></h3>
   <ul>
    <li><a href="#">Lorem ipsum dolo amet consecect</a></li>
    <li><a href="#">Sed laoreet neque nonte mauris </a></li>
    <li><a href="#">Metus lacus, porta vestibulum</a></li>
    <li><a href="#">Morbi ac magna est ornare eliticits</a></li>
    <li><a href="#">Voluptas sadips nemis un etras</a></li>
   </ul>
  </div>
  <!-- /recent posts -->
  <!-- subscribe block -->
  <div class="subscribe_block">
   <h3><span>Stay Connected</span></h3>
   <form method="post" action="#">
    <p><input type="text" id="name" value="NAME ..." /></p>
    <p><input type="text" id="email" value="EMAIL ..." /></p>
    <p><input type="submit" value="Subscribe" /></p>
   </form>
  </div>
  <!-- /subscribe block -->
 </footer>
</div>

<!-- copyright -->
<div class="copyright">
 <div class="wraper">
  <p><span>Copyright 2012 Construct</span>All Rights Reserved<a href="#">RSS</a><a href="#">Comments</a></p>
  <a class="top" href="#">Back to the top</a>
 </div>
</div>
<!-- /copyright -->
<!-- /footer -->
</body>
</html> 
